<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>hls.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .hlsjs {
        position: relative;
        width: 70%;
      }
      .ratio {
        position: absolute;
        padding-top: 75%;
      }
      video {
        background-color: #ccc;
        width: 100%;
      }
    </style>

    <script src="../../../dist/hls.js"></script>

    <script>
      window.onload = function () {
        if (Hls.isSupported()) {
          var video1 = document.getElementById('video1'),
            video2 = document.getElementById('video2'),
            hls1 = new Hls({ debug: true }),
            hls2 = new Hls({ debug: true });

          hls1.on(Hls.Events.MEDIA_ATTACHED, function () {
            hls1.loadSource(
              'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'
            );
          });

          hls2.on(Hls.Events.MEDIA_ATTACHED, function () {
            hls2.loadSource(
              'http://www.streambox.fr/playlists/x31jrg1/x31jrg1.m3u8'
            );
          });

          hls1.attachMedia(video1);
          hls2.attachMedia(video2);
        }
      };
    </script>
  </head>

  <body>
    <h1>hls.js</h1>

    <h2>First instance</h2>

    <div class="hlsjs">
      <video id="video1" controls></video>

      <div class="ratio"></div>
    </div>

    <h2>Second instance</h2>

    <div class="hlsjs">
      <video id="video2" controls></video>

      <div class="ratio"></div>
    </div>
  </body>
</html>
